<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
    name: "AddMarkerInfowindow.component",
    components: {Maptalks},
    setup() {

        let mapOnLoadCB = (map) => {

            let layer = new maptalks.VectorLayer(MapLayerConst.MAP_INFO_WINDOW_LAYER).addTo(map);

            let marker = new maptalks.Marker(map.getCenter()).addTo(layer);

            marker.setInfoWindow({
                'custom': true,
                'content': `
                    <div class="info-window-content">
                        <div class="pop_time">Custom InfoWindow ${new Date().toLocaleTimeString()}</div>
                        <div class="arrow"></div>
                    </div>
                `
            });

            marker.on("mouseover", () => {
                marker.openInfoWindow();
            })

            marker.on("mouseout", () => {
                marker.closeInfoWindow();
            })
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style lang="less">
.info-window-content {
    color: #fff;
    width: 300px;
    height: 35px;
    background-color: #051127;
    border: 1px solid #0c2c45;
    .pop_time {
        height: 35px;
        margin: 0 10px;
        line-height: 35px
    }
    .arrow {
        display: block;
        border-top: 10px solid #162259;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -10px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
    }
}
</style>
